import { BaseComponent } from './../baseComponent';
import { Component, OnInit, Input, EventEmitter, Output, AfterViewInit, OnChanges } from '@angular/core';

@Component({
    selector: 'digital-keyboard',
    styleUrls: ['./widgets.scss'],
    template: `
        <div class="digital-keyboard-container">
            <md-grid-list cols="3" rowHeight="2:1">
                <md-grid-tile *ngFor="let key of keys" class="{{key.class && key.class}}" (click)="clickItem(key)">
                    <span *ngIf="key.operate != 'delete'">{{key.text}}</span>
                    <i *ngIf="key.operate == 'delete'" class="material-icons text-xxxl">{{key.text}}</i>
                </md-grid-tile>
            </md-grid-list>
        </div>
    `
})
export class DigitalKeyboard extends BaseComponent {
    @Output() clickEvent = new EventEmitter<(sum: string) => string | null>();


    private keys = [
        {
            text: '1',
            class: ''
        },
        {
            text: '2',
            class: ''
        },
        {
            text: '3',
            class: ''
        },
        {
            text: '4',
            class: ''
        },
        {
            text: '5',
            class: ''
        },
        {
            text: '6',
            class: ''
        },
        {
            text: '7',
            class: ''
        },
        {
            text: '8',
            class: ''
        },
        {
            text: '9',
            class: ''
        },
        {
            text: 'C',
            class: 'bd-gray',
            operate: 'reset'
        },
        {
            text: '0',
            class: ''
        },
        {
            text: 'keyboard_backspace',
            class: 'bd-gray',
            operate: 'delete'
        }
    ];

    private allOpreation = {
        reset: () => sum => "0",
        delete: () => (sum) => sum.substring(0, sum.length - 1) ? sum.substring(0, sum.length - 1) : '0',
        addChar: value => sum => sum == '0' ? value : sum + value
    }

    clickItem(item) {
        this.clickEvent.emit(this.allOpreation[item.operate || "addChar"](item.text))
    }

}

